<template>
  <el-dialog width="900px" title="提示" visible :before-close="close">
    <div class="flex-layout">
      <div>【题型】：{{ detailData.questionType | questionTypeData }}</div>
      <div>【编号】：{{ detailData.id }}</div>
      <div>【难度】：{{ detailData.difficulty | difficultyData }}</div>
      <div>【标签】：{{ detailData.tags }}</div>
    </div>
    <div class="flex-layout margin-top">
      <div>【学科】：{{ detailData.subjectName }}</div>
      <div>【目录】：{{ detailData.directoryName }}</div>
      <div>【方向】：{{ detailData.direction }}</div>
      <div></div>
    </div>
    <hr class="margin-top" />
    <div>【题干】：</div>
    <div class="colorBlue" v-html="detailData.question"></div>

    <!-- 单选题型 -->
    <div v-if="+detailData.questionType === 1">
      <p>单选题 选项：（以下选中的选项为正确答案）</p>
      <el-radio-group :value="detailData.isChoice">
        <p
          class="margin-top"
          v-for="(item, index) in detailData.options"
          :key="index"
        >
          <el-radio :label="index">{{
            item.title ? item.title : "无内容"
          }}</el-radio>
        </p>
      </el-radio-group>
    </div>

    <!-- 复选题型 -->
    <div v-if="+detailData.questionType === 2">
      <p>复选题 选项：（以下选中的选项为正确答案）</p>
      <el-radio-group :value="detailData.isChoice">
        <p
          class="margin-top"
          v-for="(item, index) in detailData.options"
          :key="index"
        >
          <el-checkbox :label="item.isRight">{{
            item.title ? item.title : "无内容"
          }}</el-checkbox>
        </p>
      </el-radio-group>
    </div>

    <!-- 简答题型 -->
    <!-- <div v-if=" +detailData.questionType === 3">
      <p>简答题</p>
        <p class="margin-top" v-html="detailData.question"></p>
    </div> -->

    <hr class="margin-top" />
    <div>
      <span>【参考答案】：</span>
      <el-button @click="videoPreviewOpen = true" type="danger"
        >视频答案预览</el-button
      >
      <div class="video" v-if="videoPreviewOpen">
        <video controls="controls" :src="detailData.videoURL"></video>
      </div>
    </div>

    <hr class="margin-top" />
    <div>
      <span>【答案解析】：</span
      ><span class="inlineBlock" v-html="detailData.answer"></span>
    </div>

    <hr class="margin-top" />
    <div>
      <span>【题目备注】：</span><span v-html="detailData.remarks?detailData.remarks:'无内容'"></span>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="close"> 关 闭 </el-button>
    </span>
  </el-dialog>
</template>
<script>
import { detail } from '@/api/hmmm/questions'
import { questionType, difficulty } from '@/api/hmmm/constants'
export default {
  name: '',
  props: {
    // dialogVisible: {
    //   type: Boolean,
    //   request: true
    // },
    detailId: {
      type: Number,
      request: true
    }
  },
  data () {
    return {
      // 基础题库详情数据
      detailData: {},
      // 获取简单目录liebiao
      allCatalogName: [],
      // 是否打开视频预览
      videoPreviewOpen: false
    }
  },
  filters: {
    questionTypeData (data) {
      const str = questionType.find(
        (item) => Number(item.value) === Number(data)
      ).label
      return str
    },
    difficultyData (data) {
      const str = difficulty.find((item) => item.value === Number(data)).label
      return str
    }
  },
  methods: {
    async detail () {
      const res = await detail({ id: this.detailId })
      this.detailData = res.data
    },
    close () {
      this.$emit('close')
    }
  },
  created () {
    this.detail()
  }
}
</script>
<style scoped>
.flex-layout {
  display: flex;
}
.flex-layout > div {
  flex: 1;
}
.margin-top {
  margin-top: 20px;
}
.colorBlue {
  color: blue;
}
.inlineBlock {
  display: inline-block;
}
.video {
  width: 400px;
  height: 300px;
}
.video video{
  width: 100%;
  height: 100%;
}
</style>
